<template>
  <div class="">
    <el-drawer :model-value="drawerVisile" size="60%" :before-close="handleClose">
      <template #header>
        <span class="title">我的预约</span>
      </template>
      <div class="content">
        <el-table class="reserve-list" :data="myReserve">
          <el-table-column prop="roomId" label="会议室id" align="center"> </el-table-column>
          <el-table-column prop="startTime" label="开始时间" width="180" align="center">
          </el-table-column>
          <el-table-column prop="endTime" label="结束时间" width="180" align="center">
          </el-table-column>
          <el-table-column prop="remark" label="备注" align="center" show-overflow-tooltip width="200"> </el-table-column>
          <el-table-column prop="status" label="状态" align="center">
            <template #default="scope">
              <el-tag :type="checkReserveStatus(scope.row).type">
                {{ checkReserveStatus(scope.row).text }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="180" align="center">
            <template #default="scope">
              <!-- <el-button type="primary" link @click="handleUpdate(scope.row)">修改</el-button> -->
              <el-button
                type="danger"
                link
                @click="handleCancel(scope.row)"
                v-if="checkReserveStatus(scope.row).status === 0"
                >取消预约</el-button
              >
              <el-button
                type="primary"
                link
                @click="handleUpdate(scope.row)"
                v-else-if="checkReserveStatus(scope.row).status === 2"
                >重新预约</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          background
          class="m-t-10 m-b-10"
          style="justify-content: flex-end"
          layout="prev, pager, next"
          :page-size="13"
          :total="total"
          v-model:current-page="qurryParams.current"
          @current-change="onSearch()"
        />
      </div>

      <!-- <el-dialog
        title=""
        v-model="dialogVisible"
        width="600px"
        :before-close="dialogBeforeClose"
        :close="handleClose"
      >
        <el-form ref="formRef" label-width="auto" :model="reserveForm" label-position="top">
          <el-form-item label="预约时段:">
            <div class="timeRange">
              <el-date-picker
                v-model="reserveForm.startTime"
                type="datetime"
                placeholder="选择会议开始时间"
              />-<el-date-picker
                v-model="reserveForm.endTime"
                type="datetime"
                placeholder="选择会议结束时间"
              />
            </div>
          </el-form-item>
          <el-form-item label="备注:">
            <el-input
              v-model="reserveForm.remark"
              type="textarea"
              :rows="3"
              placeholder="请输入备注内容"
            />
          </el-form-item>
          <el-form-item>
            <div class="btn">
              <el-button type="primary" @click="handleSubmit()">提交</el-button>
              <el-button @click="handleClose">取消</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-dialog> -->
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { getMyReserveList } from '@/api/meeting';
import { ref, reactive, watch } from 'vue';
import { storeToRefs } from 'pinia';
import dayjs from 'dayjs';
import { ElMessage } from 'element-plus';
import { useRoomReserveStore } from '@/store/roomReserve';

const useRoomReserve = useRoomReserveStore();
const { roomReserveList, reserveForm, myReserve } = storeToRefs(useRoomReserve);

const props = defineProps(['drawerVisile']);
const emits = defineEmits(['update:drawerVisile']);

// 监听抽屉显示状态
watch(() => props.drawerVisile, (newVal) => {
  if (newVal) {
    onSearch();
  }
});

const qurryParams = ref({
  current: 1,
  size: 13,
  createTime: '',
});
const total = ref(0);

const dialogVisible = ref(false);
// const handleCancel = (row: any) => {
//   useRoomReserve.cancelReserve(row.id, 2);
// };
// 取消预约
const handleCancel = async (row: any) => {
  try {
    await useRoomReserve.cancelReserve(row.id, 2);
    // 重新获取预约列表数据
    await new Promise(resolve => setTimeout(resolve, 300));
 onSearch();
    ElMessage.success('取消预约成功');
  } catch (error) {
    console.error('取消预约失败:', error);
    ElMessage.error('取消预约失败');
  }
};


const handleUpdate = async (row: any) => {
  try {
    await useRoomReserve.cancelReserve(row.id, 0);
    // 重新获取预约列表数据
    await new Promise(resolve => setTimeout(resolve, 300));
    onSearch();
    ElMessage.success('重新预约成功');
  } catch (error) {
    console.error('取消预约失败:', error);
    ElMessage.error('取消预约失败');
  }

};
// const handleUpdate = (row: any) => {
//
//   useRoomReserve.cancelReserve(row.id, 0);
// };

// 判断预约是否过期
const checkReserveStatus = (row: any) => {
  const now = dayjs();
  const endTime = dayjs(row.endTime);
  
  if (now.isAfter(endTime)) {
    if (row.status === 0) {
      // 待审核状态过期
      return { status: 2, text: '已过期', type: 'info' as const };
    } else if (row.status === 1) {
      // 已确认状态过期
      return { status: 3, text: '已完成', type: 'success' as const };
    }
  }
  
  // 未过期状态
  switch (row.status) {
    case 0:
      return { status: 0, text: '待审核', type: 'warning' as const };
    case 1:
      return { status: 1, text: '已确认', type: 'success' as const };
    case 2:
      return { status: 2, text: '已取消', type: 'danger' as const };
    case 3:
      return { status: 3, text: '已完成', type: 'success' as const };
    case 4:
      return { status: 4, text: '审核未通过', type: 'danger' as const };
    default:
      return { status: row.status, text: '未知状态', type: 'info' as const };
  }
};

const onSearch = () => {
  getMyReserveList(qurryParams.value).then((res) => {
    myReserve.value = res.data.records;
    total.value = res.data.total;
  });
};

const handleClose = () => {
  emits('update:drawerVisile', false);
  console.log('close');
};
</script>

<style scoped lang="scss">
.title {
  font-size: 24px;
  font-weight: bold;
}
.content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
</style>
